<template>
	<view class="black_day">
		<view class="life_title">暮之霭</view>
		<view class="life_one">没有人永远活着，没有东西可以经久。</view>
		<view class="life_card">
			<view class="watch">
				<view class="face">
					<view class="life_long">{{ lifeLen }}</view>
				</view>
				<view class="arms">
					<view class="arm arm-hour" :style="{ transform: 'rotateZ(' + hourDeg + 'deg)' }"></view>
					<view class="arm arm-minute" :style="{ transform: 'rotateZ(' + minuteDeg + 'deg)' }"></view>
					<!-- <view class="arm arm-second" :style="{transform: 'rotateZ('+secondDeg+'deg)'}"></view> -->
				</view>
			</view>
			<view class="info">
				<view class="life_time">这是你人生中的 {{ hours }} 点 {{ minutes }} 分</view>
				<text class="life_tip">接下来的日子，你大约可以</text>
				<view class="row">
					<view class="row_item">
						<view>吃{{ eat }}顿饭</view>
					</view>
					<view class="row_item">
						<view>拥有{{ travel }}次旅行</view>
					</view>
				</view>
				<view class="row">
					<view class="row_item">
						<view>度过{{ week }}个周末</view>
					</view>
					<view class="row_item">
						<view>享受{{ vocation }}个长假</view>
					</view>
				</view>
			</view>
			<view class="life_btn" @click="handleOpenWhite">晨之曦</view>
		</view>
	</view>
</template>

<script>
import { getLifeTime, getBirthTime, getDeadTime } from '../../../pages/Time/utils.js';
export default {
	data() {
		return {
			hours: 0,
			minutes: 0,
			// seconds: 0,
			lifeLen: 0,
			eat: 0,
			travel: 0,
			week: 0,
			vocation: 0,
			timer: null // 时间的计时器
		};
	},
	methods: {
		async getLife() {
			Promise.all([getBirthTime(), getDeadTime()])
				.then(([res1, res2]) => {
					const storeBirthTime = res1;
					if (!storeBirthTime) {
						uni.navigateTo({
							url: 'TimeSetting/TimeSetting'
						});
						return;
					}
					const date = new Date();
					const storeLifeLen = res2;
					const birthDate = new Date(storeBirthTime);
					const time = getLifeTime(date, birthDate, true);
					const allMinutes = (time.lifeTime / storeLifeLen) * 60 * 24;

					const hours = Math.floor(allMinutes / 60);
					const minutes = Math.floor(allMinutes % 60);
					// const seconds = Math.floor(allMinutes % 1 * 60);

					let lifeDay = storeLifeLen * 365.5 - time.lifeDay;
					this.eat = parseInt(lifeDay * 3);
					this.travel = parseInt(lifeDay / 30);
					this.week = parseInt(lifeDay / 7);
					this.vocation = parseInt(lifeDay / 180);

					this.hours = hours;
					this.minutes = minutes;
					// this.seconds = seconds;
					this.lifeLen = storeLifeLen;
				})
				.catch(err => {
					switch (err) {
						case 'fail': {
							uni.navigateTo({
								url: '../TimeSetting/TimeSetting'
							});
							break;
						}
						case 'fail2': {
							uni.navigateTo({
								url: '../DeadSetting/TimeSetting'
							});
							break;
						}
					}
				});
		},
		handleOpenWhite() {
			uni.navigateBack({
				url: 'components/Time/Time.vue'
			});
		}
	},
	computed: {
		hourDeg() {
			return this.hours * 30;
		},
		minuteDeg() {
			return this.minutes * 6;
		},
		secondDeg() {
			return this.seconds * 6;
		}
	},
	onShow() {
		this.getLife();
	}
};
</script>

<style lang="scss" scoped>
.black_day {
	background-color: #474747;
	height: 100vh;
	color: #aaa;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.life_title {
	text-align: center;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.life_one {
	text-align: center;
	line-height: 50rpx;
}

.life_btn {
	position: relative;
	top: 90rpx;
	left: 0;
	right: 0;
	display: block;
	font-size: 34rpx;
	letter-spacing: 6rpx;
	width: 190rpx;
	line-height: 70rpx;
	text-align: center;
	border: 2rpx solid #878787;
	margin: 0 auto;
}

.life_long {
	font-size: 150rpx;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
	text-align: center;
	color: #adadad;
}

.info {
	width: 84%;
	margin: 0 auto;
	margin-top: 40rpx;
	.life_time {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 38rpx;
		margin-bottom: 40rpx;
		font-weight: bold;

		.roll_text {
			margin: 0 10rpx;
		}
	}

	.life_tip {
		display: block;
		font-size: 26rpx;
		color: #aaa;
		margin-bottom: 20rpx;
	}

	.row {
		display: flex;
		height: 100rpx;
		border: 1rpx solid #8a8a8a;
		font-size: 30rpx;

		.row_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;

			&:nth-child(2) {
				border: 1rpx solid #8a8a8a;
				border-width: 0 0 0 1rpx;
			}
		}

		&:last-child {
			border-top: none;
		}
	}
}

.life_card {
	height: 995rpx;
	width: 700rpx;
	margin: 5px auto;
	padding: 20rpx;
	box-shadow: 2px 2px 15px 2px #3d3d3d;
}

.watch {
	zoom: 0.7;
	position: relative;
	width: 480rpx;
	height: 480rpx;
	background: #aaaaaa;
	margin: 0 auto;
	margin-top: 35px;
	border: 15rpx solid #5f5f5f;
	border-radius: 50%;
}

.face {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 400rpx;
	height: 400rpx;
	border-radius: 50%;
	background-color: #484848;
	transform: translateY(-50%);
	box-shadow: 0 0px 5px 2px rgba(255, 255, 255, 0.4) inset;
	border: 1rpx solid #000000;
}

.face::before {
	// content: '';
	// position: absolute;
	// top: 50%;
	// left: 0;
	// right: 0;
	// width: 50%;
	// height: 50%;
	// margin: 0 auto;
	// transform: translateY(-50%);
	// border-radius: 50%;
	// background-color: #828080;
}

.arms {
	position: absolute;
	top: 50%;
	left: 50%;
}

.arms:after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26rpx;
	height: 26rpx;
	content: '';
	background: #b84444;
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 999;
	box-shadow: 0 0 6rpx #ddd;
}

.arm {
	transform-origin: center bottom;
	border-radius: 5rpx;
}

.arm.arm-hour {
	position: absolute;
	bottom: 0;
	left: -4rpx;
	background-color: #fff;
	height: 120rpx;
	width: 8rpx;
}

.arm.arm-minute {
	position: absolute;
	bottom: 0;
	left: -4rpx;
	background-color: #fff;
	height: 160rpx;
	width: 8rpx;
}

.arm.arm-second {
	position: absolute;
	bottom: 0;
	left: -4rpx;
	background-color: #ff0000;
	height: 170rpx;
	width: 6rpx;
	transform-origin: bottom;
}
</style>
